<template>
  <!--  -->
  <!-- 文件预览：视频预览 -->
  <!--  -->
  <div id="player" ref="player"></div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted, watch, computed } from "vue";
import DPlayer from "dplayer"            //视频播放插件，依赖下载在package.json第19行
const { proxy } = getCurrentInstance();

const props = defineProps({
    url: {
        type: String,
    },
});
//视频
const videoInfo = ref({
    video: null,
});
//视频播放器
const player = ref();


//加载视频播放器
const initPlayer = () => {
    const dp = new DPlayer({
        element: player.value,
        theme: "#b7daff",
        screenshot: true,
        video: {
            url: `/api/${props.url}`, //视频地址
            type: "customHls",        //index.html第7行引入
            customType: {
                customHls: function(video, player) {
                    const hls = new Hls();
                    hls.loadSource(video.src);
                    hls.attachMedia(video);
                },
            },
        },
    });
}


//在Vue3 中,onMounted 是一个生命周期钩子函数,用于在组件渲染后执行（在<script>标签头部引入）
onMounted(() => {
    initPlayer();
})

</script>

<style lang="scss" scoped>
#player {
    width: 100%;
    :deep .dplayer-video-wrap {
        text-align: center;
        .dplayer-video {
            margin: 0px auto;
            max-height: calc(100vh - 41px);
        }
    }
}

</style>